<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/assets/css/bootstrap.css">
    <link rel="stylesheet" href="/assets/css/changePassword.css">
    <title>修改密码 - 选修课报名系统</title>
</head>
<body class="col-lg-10 col-md-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-xs-offset-1">
    <nav class="navbar navbar-inverse ">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">选修课报名系统</a>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">选课中心</a></li>
                    <li><a href="/myCourse">我的选课</a></li>
                    <li class="active"><a href="/changePassword">修改密码</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a>欢迎你，<%= sname %> (<%= sid %>)</a></li>
                    <li><a href="/exitLogin">退出登录</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <% if (!changePassword) { %>
        <div class="alert alert-danger" role="alert" style="text-align: center">系统检测到你的当前密码为初始密码，请务必进行更改后才能进行下一步操作！</div>
    <% } %>

    <div class="container col-lg-4 col-md-4 col-xs-4 col-lg-offset-4 col-md-offset-4 col-xs-offset-4">
        <div class="row">
            <div class="input-group">
                <span class="input-group-addon">新密码</span>
                <input type="password" class="form-control"  id="new_pwd1" placeholder="请输入当前密码">
                <span class="alert alert-danger tips-pwd1">密码格式不对</span>
            </div>
        </div>
        <div class="row">
            <div class="input-group">
                <span class="input-group-addon">确认密码</span>
                <input type="password" class="form-control" id="new_pwd2" placeholder="请输入当前密码">
                <span class="alert alert-danger tips-pwd2">两次输入的密码不一致</span>
            </div>
        </div>
        <div class="row">
            <div class="input-group">
                <input type="button" class="btn btn-success" class="form-control" id="form-submit" value="提交">
            </div>
        </div>
    </div>

</body>
</html>
<script src="/assets/js/jquery-1.8.3.min.js"></script>
<script>

    $('#new_pwd1').on('focus', function () {
        $('.tips-pwd1').hide()
    })

    $('#new_pwd2').on('focus', function () {
        $('.tips-pwd2').hide()
    })

    $('#form-submit').click(function () {
        //先验证两次的密码是否一致
        // alert(1)
        var new_pwd1 = $('#new_pwd1').val()
        var new_pwd2 = $('#new_pwd2').val()

        if (new_pwd1 === '') {
            $('.tips-pwd1').slideToggle().show().html('你还没有输入密码！')
            return
        }else if (new_pwd2 === '') {
            $('.tips-pwd2').slideToggle().show().html('请输入确认密码！')
            return
        }

        if (new_pwd1 !== new_pwd2) {
            $('.tips-pwd2').slideToggle().show().html('两次输入的密码不一致！')
            return
        }

        if (checkStrength(new_pwd1) < 2) {
            $('.tips-pwd1').slideToggle().show().html('密码必须6位以上，并且为数字和字母混合使用！')
            return
        }

        $.ajax({
            url: '/changePassword',
            type: 'post',
            data: {
                password: new_pwd1
            },
            success (data) {
                if (data.result === 1) {
                    alert('修改成功')
                    window.location.href = '/login'
                }
            }
        })

        //保存密码
    })

    // 密码强度校验
    function checkStrength (val){
        var lv = 0;
        if (val.match(/[a-z]/g)) {
            lv ++;
        }
        if (val.match(/[0-9]/g)){
            lv ++;
        }
        if (val.match(/(.[^a-z0-9])/g)){
            lv ++;
        }
        if (val.length < 6){
            lv = 0;
        }
        if (lv > 3){
            lv = 3;
        }
        return lv
    };
</script>